<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jessica demo</title>
    <meta http-equiv="origin-trial"
          content="AjU8lA9nUt9ly2bNwJ2ZZQfka1hePBYt56dwHgHEj9Un84AtzB+xrr9wr2Qf2PnVV2ilepcDU+f+EQa5qBHbawgAAABheyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjYzMzQyIiwiZmVhdHVyZSI6IlVucmVzdHJpY3RlZFNoYXJlZEFycmF5QnVmZmVyIiwiZXhwaXJ5IjoxNzUzMTQyNDAwfQ==">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./demo.css">
    <script src="./vconsole.js"></script>
    <script>
       window.JESSIBUCA_PRO_OBJECT_DETECTOR_WASM_URL = './js/jessibuca-pro-object-detector-decoder.wasm'
    </script>
    <script src="./js/jessibuca-pro-object-detector-demo.js"></script>
    <script src="./js/jessibuca-pro-demo.js"></script>
    <style>
        .container-shell:before {
            content: "jessibuca pro object detect demo player";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
                <span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
                <span id="wcsNotSupport264"
                      style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
                <span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wasmSupport" style="color: green;display: none">支持WASM解码；</span>
                <span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码；</span>
                <span id="simdMtSupport" style="color: green;display: none">支持WASM WASM(SIMD) 多线程解码；</span>
                <span id="wasmNotSupport" style="color: red;display: none">不支持WASM解码；</span>
                <span id="simdNotSupport"
                      style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码；</span>
                <span id="simdMtNotSupport" style="color: red;display: none">不支持WASM WASM(SIMD) 多线程解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                <div>
                    <span>硬解码：</span>
                    <input
                        type="checkbox"
                        id="useWCS"
                    /><span>Webcodec</span>
                </div>
                <div>
                    <span>软解码：</span>
                    <input
                        checked
                        type="checkbox"
                        id="useWASM"
                    /><span>WASM</span>
                    <input
                        type="checkbox"
                        id="useSIMD"
                    /><span>WASM(SIMD)</span>
                    <input
                        type="checkbox" ,
                        id="isFFmpegSIMD"
                        onclick="replay()"
                    /><span>isSIMD(V2)</span>
                    <input
                        type="checkbox"
                        checked
                        id="useSIMDMThreading"
                        onclick="replay()"
                    /><span>启动多线程（WASM,WASM(SIMD)解码支持）</span>
                    <span style="color: green">默认使用wasm解码器</span>
                </div>
            </div>
        </div>

        <div class="input">
            tip：支持回调ai识别出来的数据，数据格式：className：物体名称(en),<br>
            confidence:相似度，box：区域（width,heigh,x,y）
        </div>
        <div class="input">
            tip: 检测间隔时间设置为0 的时候，每一帧都会检查。（会非常吃性能）
        </div>
        <div class="input">
            <span style="color: green">tip: 物品识别默认关闭：需要在底部控制条上面手动开启物品识别检测</span>
        </div>
        <div class="input">
            <span>是否显示识别框子</span>
            <input type="checkbox" id="aiObjectDetectShowRect" checked>
            <span> | </span>
            识别度：
            <select id="detectWidth">
                <option value="5">极高</option>
                <option value="4">较高</option>
                <option value="3" selected>高</option>
                <option value="2">中等</option>
                <option value="1">低</option>
            </select>
            <span> | </span>
            检测间隔时间(单位：秒)：
            <input type="text" style="width: 100px" id="intervalTime" value="0.5">
            <button>更新检测间隔</button>
            <span style="color: red;margin-left: 10px">识别度越高，越吃CUP</span>
        </div>
        <div class="input">
            <div>
                <span>边框宽度</span>
                <input type="text" id="borderWidth" style="width:50px" value="2">
                <span>边框颜色</span>
                <input type="text" id="borderColor" style="width:80px" value="#0000FF">
                <span>字体颜色</span>
                <input type="text" id="color" style="width:80px" value="#000">
                <span>字体大小</span>
                <input type="text" id="fontSize" style="width:50px" value="14">
            </div>
            <button onclick="replay()">重播</button>
        </div>
        <div class="input">
            <div>
                <div>
                    <span>是否生成截图 <span style="color: red">(会很吃CPU，不推荐勾选)</span></span>
                    <input type="checkbox" id="aiObjectDetectEmitBase64">
                    <button onclick="replay()">重播</button>

                </div>
            </div>
        </div>
        <div class="input">
            <div>输入URL：</div>
            <input
                    autocomplete="on"
                    id="playUrl"
                    value=""
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
        </div>
        <div class="input input-wrap">
            <span>截图：</span>
            <span id="aiImageText1"></span>
            <img id="aiImage1" src="">
            <span id="aiImageText2"></span>
            <img id="aiImage2" alt="">
            <span id="aiImageText3"></span>
            <img id="aiImage3" alt="">
            <span id="aiImageText4"></span>
            <img id="aiImage4" alt="">
            <span id="aiImageText5"></span>
            <img id="aiImage5" alt="">
        </div>
    </div>
</div>
<script src="./demo.js"></script>

<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $detectWidth = document.getElementById('detectWidth');
    var $intervalTime = document.getElementById('intervalTime');
    var $aiObjectDetectShowRect = document.getElementById('aiObjectDetectShowRect');
    var $borderWidth = document.getElementById('borderWidth');
    var $borderColor = document.getElementById('borderColor');
    var $color = document.getElementById('color');
    var $fontSize = document.getElementById('fontSize');
    var $aiObjectDetectEmitBase64 = document.getElementById('aiObjectDetectEmitBase64');
    var $useWCS = document.getElementById('useWCS');
    var $useSIMD = document.getElementById('useSIMD');
    var $useWASM = document.getElementById('useWASM');
    var $isFFmpegSIMD = document.getElementById('isFFmpegSIMD');
    var $useSIMDMThreading = document.getElementById('useSIMDMThreading');


    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;
    var currentIndex = 1;
    function create() {
        clearImage();
        jessibuca = new JessibucaPro({
            container: $container,
            videoBuffer: 1, // 缓存时长
            decoder: './js/decoder-pro.js',
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            useMSE: false,
            useWCS: $useWCS.checked === true,
            useSIMD: $useSIMD.checked === true,
            isFFmpegSIMD: $isFFmpegSIMD.checked === true,
            useMThreading: $useSIMDMThreading.checked === true,
            videoRenderType:'canvas',
            showBandwidth: showOperateBtns, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            operateBtns: {
                fullscreen: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                performance: showOperateBtns,
                aiObject: showOperateBtns,
            },
            audioEngine: "worklet",
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
            heartTimeout: 10,

            useObjectDetector: true,
            aiObjectDetectTarget: 'person',
            aiObjectDetectShowRect: $aiObjectDetectShowRect.checked,
            aiObjectDetectInterval: Number($intervalTime.value),
            aiObjectDetectLevel: Number($detectWidth.value),
            aiObjectDetectRectConfig: {
                borderWidth: Number($borderWidth.value),
                borderColor: $borderColor.value,
                color: $color.value,
                fontSize: Number($fontSize.value),
            },
            aiObjectDetectEmitBase64: $aiObjectDetectEmitBase64.checked,

        },);

        jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error) => {
            jessibuca.showErrorMessageTips('播放异常：' + error);
        })


        jessibuca.on('aiObjectDetectorInfo', (msg) => {
            console.log('aiObjectDetectorInfo', msg);
            (msg.list || []).forEach((item) => {
                if (item.base64) {
                    // 循环渲染图片
                    var $img = document.getElementById('aiImage' + currentIndex);
                    $img.src = item.base64;
                    var $text = document.getElementById('aiImageText' + currentIndex);
                    $text.textContent = `${item.zh}(${item.en})-相似度：${item.confidence.toFixed(2)}`;
                    currentIndex++;
                    if (currentIndex > 5) {
                        currentIndex = 1;
                    }
                }
            })
        })


        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $destroy.style.display = 'none';
    }

    create();

    function clearImage(){
        currentIndex = 1
        for (var i = 1; i <= 5; i++) {
            var $img = document.getElementById('aiImage' + i);
            $img.src = '';
        }
    }

    function play() {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href).then(() => {
                $player.style.display = 'none';
                $pause.style.display = 'inline-block';
                $destroy.style.display = 'inline-block';
                notifySuccess('播放成功');
            }).catch((error) => {
                jessibuca.showErrorMessageTips(error.toString());
            });
        }
        else{
            jessibuca.showErrorMessageTips('播放地址不能为空');
        }
    }

    function replay() {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
                play();
            });
        } else {
            create();
            play();
        }
    }

    $player.addEventListener('click', function () {
        play();
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        jessibuca.pause();
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
            });
        } else {
            create();
        }

    })


    $detectWidth.addEventListener('change', function () {
        replay();
    })


    $useSIMD.addEventListener('click', function () {
        const checked = $useSIMD.checked;
        if (checked) {
            $useWCS.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWCS.addEventListener('click', function () {
        const checked = $useWCS.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWASM.addEventListener('click', function () {
        const checked = $useWASM.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWCS.checked = false
        }
        replay();
    })


</script>

</body>
</html>
